<script setup>
  import {ref as 响应} from 'vue'

  const 过渡动画 = 响应('淡入淡出')
</script>

<template>
  <nav>
    <router-link to="/">主页</router-link>
    |
    <router-link to="/关于">关于</router-link>
  </nav>
  <router-view #default="{Component}">
    <transition :name="过渡动画" mode="out-in">
      <component :is="Component"></component>
    </transition>
  </router-view>
</template>

<style scoped>
  nav {
    margin-bottom: 20px;
    font-weight: bold;
  }
  .淡入淡出-enter-active, .淡入淡出-leave-active {
    transition: opacity 0.5s ease;
  }
  .淡入淡出-enter-from, .淡入淡出-leave-to {
    opacity: 0;
  }
</style>
